import React, { Component } from 'react'
import { Button,Checkbox,Form, Input, Modal, Select,message } from 'antd'
import { connect } from 'react-redux'
import {
    addrolefetch,editrolefetch
  } from 'actions/admin'
const FormItem = Form.Item
@Form.create({
    mapPropsToFields(props) {
        return {
            name: Form.createFormField({
            ...props.single,
            value: props.single.name,
            }),
            description: Form.createFormField({
                ...props.single,
                value: props.single.description,
            }),
            roleType: Form.createFormField({
                ...props.single,
                value: props.single.roleType,
            }),            
        };
    }
})
@connect(
    (state, props) => ({
      config: state.config,
    })
  )
export default class Rolemodala extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
      }
    }
    
    componentWillMount () {
      let data = localStorage.getItem(name)
      this.setState({ data })
    }

    onchangeFN(value){
        console.log(value)
    }
    showData(callback,e){//新增/编辑确定按钮
        e.preventDefault();
        
        this.props.form.validateFields((err, values) => {
            if(!err){
                const datajson = Object.assign(values,{id:this.props.single.id});
                if(this.props.isadd){
                    this.props.dispatch(addrolefetch(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.contentModalCancel();
                    }))
                }
                else{
                    this.props.dispatch(editrolefetch(
                        datajson,
                        (respose) => {
                            callback&&callback()
                            message.success(respose.respMsg)
                            this.props.contentModalCancel();
                    }))
                }
                
                
            }
        });
        
        
    }
    render () {
     const {form } = this.props
     const { getFieldDecorator } = form;
     const CheckboxGroup = Checkbox.Group;
     const Option = Select.Option;
     const formItemLayout = {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      };
      return (
        <Modal
            maskClosable={false}
          visible={this.props.contentModal}
          title={this.props.isadd?"新增用户":"编辑用户"}
          onCancel={this.props.contentModalCancel}
          onOk={this.showData.bind(this,this.props.callback)}
        >
            <Form>
                <FormItem label="角色名称：" {...formItemLayout}>      
                {
                    getFieldDecorator('name', {
                    rules: [{
                        required: true,message: '请输入角色名称'
                    }],
                    })(
                    <Input placeholder="请输入关键字" size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>
                <FormItem label="角色类型：" {...formItemLayout}>      
                {
                    getFieldDecorator('roleType', {
                    rules: [{
                        required: false,
                    }],
                    })(
                    <Select style={{ width: 120 }}>
                        {this.props.roletype.map((item, i)=> {
                            return(
                                <Option value={item.code} key={item.code}>{item.value}</Option>
                            )
                          })}
                    </Select>
                    )
                }             
                </FormItem>
                <FormItem label="描述：" {...formItemLayout}>      
                {
                    getFieldDecorator('description', {
                    rules: [{
                        required: false,message: '请输入描述'
                    }],
                    })(
                    <Input placeholder="请输入关键字" size="default" style={{ width: '150px' }} />
                    )
                }             
                </FormItem>
            </Form>
        </Modal>
      )
    }
}